<template>
  <div class="container">
    <div class="title">
      <h2>车位管理</h2>
      <h5>用于管理小区里每一个停车位的基本信息</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form
        ref="formData"
        :model="formData"
        class="demo-form-inline"
      >
        <el-form-item label="小区名称">
          <el-select v-model="formData.community_code" placeholder="请输入">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="车位名称">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
              v-model="formData.create_time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button style="float: right; padding: 10px 20px;" type="primary" @click="searchparking">查询</el-button>
          <el-button style="float: right; padding: 10px 20px;margin-right:10px;z-index=100" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" type="primary" size="small" @click="addparkinglist">新增车位</el-button>
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="50px"
        />
        <el-table-column
          prop="community.name"
          label="小区名称"
          width="150px"
        />
        <el-table-column
          prop="name"
          label="车位名称"
          width="150px"
        />
        <el-table-column
          prop="code"
          label="车辆编码"
          width="380px"
        />
        <el-table-column
          prop="remark"
          label="备注"
        />
        <el-table-column
          prop="create_time"
          label="创建时间"
        >
          <template #default="{row}">
            {{ row.create_time | parseTime }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template #default="{ row }">
            <el-button type="text" size="small" @click="showparkinglist(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delparkinglist(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="bottom">
        <el-pagination
          :current-page="current"
          :page-sizes="[5, 10, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </el-card>
    <OneForm ref="dialog" :drawer.sync="drawer" />
  </div>

</template>

<script>
import { getCommunityApi, getparkinglistApi, delparkinglistApi } from '@/api/parking/index'
import OneForm from './components/oneForm.vue'
export default {
  name: 'VueAdminTemplateMasterProject',
  components: {
    OneForm
  },
  data() {
    return {
      // 搜索 表单
      formData: {
        current: 1,
        pageSize: 10,
        name: '',
        community_code: '',
        create_time: ''
      },
      options: [],
      list: [],
      current: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      drawer: false
    }
  },
  computed: {

  },

  created() {
    this.initData()
    this.getparkinglist()
  },
  methods: {
    /**
     * 重置
     */
    reset() {
      this.formData = {
        current: 1,
        pageSize: 10,
        name: '',
        community_code: '',
        create_time: ''
      }
      this.getparkinglist()
    },
    /**
     * 搜索
     */
    async searchparking() {
      if (this.formData.create_time) {
        this.formData.create_time = this.formData.create_time.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await getparkinglistApi({
        pageSize: 999,
        current: 1,
        create_time: this.formData.create_time,
        community_code: this.formData.community_code,
        name: this.formData.name
      })
      this.list = res.rows
      this.total = res.count
    },
    /**
     * 回显
     */
    showparkinglist(id) {
      this.$refs.dialog.getshowparkinglist(id)
      console.log(id)
    },
    /**
     * 删除
     */
    delparkinglist(id) {
      this.$confirm('确认要删除该角色吗?', '温馨提示').then(async() => {
        await delparkinglistApi(id) // 调用删除接口
        if (this.list.length === 1 && this.formData.pageSize > 1) {
          this.formData.pageSize--
        }
        // 重新加载数据
        this.getparkinglist()

        this.$message.success('删除成功')
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 获取小区
     */
    async initData() {
      const res = await getCommunityApi()
      this.options = res.data
      // console.log(this.options)
    },
    /**
     * 获取收费管理项目列表
     */
    async getparkinglist() {
      this.loading = true
      const { data: { rows, count }} = await getparkinglistApi({ current: this.current, pageSize: this.pageSize })
      this.list = rows
      this.total = count
      this.loading = false
    },
    handleSizeChange(val) {
      this.current = 1
      this.pageSize = val
      this.getparkinglist()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getparkinglist()
    },
    addparkinglist() {
      this.drawer = true
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{
    margin-right:20px;
  }
  h5{
    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}
.el-form-item{
  margin-right:73px;
  ::v-deep .el-input__inner{
  height: 35px;
  line-height: 35px;
  width: 200px;
 }
}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;
}
.bottom{
  display: flex;
  align-items: center;
  font-size:13px;
justify-content: end;
}
}

</style>
